<template>
  <div class="wrapper">
    <a-page-header class="wrapper-header" title="产品物料库" sub-title="实时更新查询公司产品价格信息"/>
    <a-card>
      <a-flex justify="space-between" align="center" class="mb">
        <a-space>
          <a-button type="primary"><plus-outlined/>添加</a-button>
        </a-space>
        <a-space>
          <a-input-search placeholder="请输入产品关键字查询"/>
        </a-space>
      </a-flex>
      <div class="mb">
        <use-select-button :data-source="category" mode="radio" title="分类"/>
      </div>
      <a-table :columns="columns" :row-selection="{}"></a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import {PlusOutlined} from '@ant-design/icons-vue';
import category from '@/config/category';
import UseSelectButton from '@/components/SelectButton.vue';

const columns = [
  { title: '编号', dataIndex: 'code', key: 'code', width: 100,fixed: 'left' },
  { title: '产品名称', dataIndex: 'name', key: 'name',fixed: 'left'},
  { title: '成本价', dataIndex: 'cost_price', key: 'cost_price',width: 100 },
  { title: '销售价', dataIndex: 'sale_price', key: 'sale_price',width: 100 },
  { title: '产品分类', dataIndex: 'category', key: 'category',width: 100 },
  { title: '供应商', dataIndex: 'supplier', key: 'supplier' },
  { title: '状态', dataIndex: 'status', key: 'status',width: 100 },
  { title: '操作', dataIndex: 'action', key: 'action', fixed: 'right', width: 100},
];

</script>

<style scoped>

</style>